<template>
	<div style="
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
      ">
		<el-table :data="tabledata" style="width: 100%; height: 90%" row-key="id" :default-expand-all="defaultExpandAll"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
			<template v-for="(item, index) in tableheader" :key="index">
				<el-table-column :prop="item.key" :label="item.name" :width="item.width" v-if="!item.type">
					<template #default="scope">
						<span>{{ scope.row[item.key] }}</span>
					</template>
				</el-table-column>

				<el-table-column :prop="item.key" :label="item.name" :width="item.width" v-if="item.type === 'tags'">
					<template #default="scope">
						<div v-for="(tagitem, tagindex) in item.typedata" :key="tagindex">
							<el-tag :type="tagitem.type" v-if="scope.row[item.key] === tagitem.value">
								{{ tagitem.label }}
							</el-tag>
						</div>
					</template>
				</el-table-column>
			</template>

			<slot name="expanded"></slot>

			<el-table-column v-if="showcz" fixed="right" label="操作" :width="czwidth">
				<template #default="scope">
					<slot name="btns" :row="scope"></slot>
				</template>
			</el-table-column>
		</el-table>

		<div style="height: 10%; display: flex; justify-content: flex-end">
			<el-pagination background layout="total, prev, pager, next" v-model:current-page="currentPage"
				:total="total" :page-size="15" @current-change="CurrentChange" />
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { defineProps, inject, PropType, ref, defineExpose } from "vue";

	const getdata = inject<() => void>("getdata")!; //父组件的方法

	const props = defineProps({
		tabledata: {
			type: Array as PropType<any[]>,
			required: true,
		},
		tableheader: {
			type: Array as PropType<any[]>,
			required: true,
		},
		showcz: {
			type: Boolean,
			default: true,
		},
		czwidth: {
			type: String,
			default: "150px",
		},
		defaultExpandAll: {
			type: Boolean,
			default: false,
		},
	});

	//当前页数
	let currentPage = ref(1);
	//总数
	let total = ref(0);

	const CurrentChange = (val : number) => {
		console.log(val);
		getdata();
	};

	// 通过 defineExpose 暴露给父组件
	defineExpose({
		total,
		currentPage,
	});
</script>


<style lang="scss" scoped>
	.green_status div {
		color: #52c41a;
		background: #f6ffed;
		border-color: #b7eb8f;
		box-sizing: border-box;
		padding: 0 7px;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
		width: fit-content;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		height: fit-content;
	}

	.notgreen_status div {
		color: rgba(0, 0, 0, 0.65);
		background: rgb(250, 250, 250);
		border-color: #d9d9d9;
		box-sizing: border-box;
		padding: 0 7px;
		border: 1px solid #d9d9d9;
		border-radius: 4px;
		width: fit-content;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		height: fit-content;
	}

	.red_text {
		color: red;
	}

	.gre_text {
		color: green;
	}

	.yellow_text {
		color: yellow;
	}

	.spanbg {
		background-color: rgba(0, 0, 0, 0.15);
		padding: 4px 10px;
		border-radius: 4px;
	}

	:deep(.el-table) {
		background-color: #fff;

		&::before,
		&::after,
		.el-table--border:before,
		.el-table--border:after {
			background-color: #e4e7ed;
		}

		&.el-table--border,
		&.el-table--group {
			border-color: #e4e7ed;
		}

		.el-table__cell {
			border-color: #e4e7ed;
		}

		.el-table__body {
			tr td:last-child {
				background-color: #fff;
				border-left: 1px solid #e4e7ed;

				.cell {
					button {
						margin: 0;
					}
				}
			}
		}

		tr {
			background-color: transparent;
		}
	}

	:deep(.el-pagination) {
		display: flex;

		.el-input__inner {
			background-color: transparent;
			border: none;
		}

		.el-input {
			border-radius: 8px;
			box-shadow: 0 0 0 1px #e4e7ed inset;
		}
	}

	:deep(.blueclass) {
		background-color: #409eff;
		color: #fff;
	}

	:deep(.el-table .el-table__cell) {
		padding: 14px 0;
	}
</style>